<template>
    <div class="searchBox">
        <div class="search">
            <van-search v-model="value" :placeholder="placeholder" @input="input"/>
        </div>
        <div class="scanBox" @click="scanCode" v-if="showScan">
            <img src="../assets/img/scanning-two@2x.png" alt="图标失效">
        </div>
    </div>
</template>

<script>
    export default {
        name: "SearchInput",
        props: {
            placeholder: {
                type: String,
                default() {
                    return '请输入搜索内容'
                }
            },
            showScan: {
                type: Boolean,
                default() {
                    return true
                }
            }
        },
        data() {
            return {
                value: ''
            }
        },
        methods: {
            //搜索框监听事件
            input(val) {
                this.$emit('onInput',this.value);
            },
            scanCode() {
                this.$emit('scanCode');
            }
        }
    }
</script>

<style lang="less" scoped>
//搜索框
.searchBox {
    height: 1.296296rem;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    .search {
        flex: 1;
        height: 1.296296rem;
        background-color: #fff!important;
        //因scoped 作用域的问题，必须加上& /deep/才可以覆盖ui组件样式
        & /deep/ .van-search {
            padding-top: 10px;
            height: 1.296296rem;
            background-color: #fff!important;
            .van-search__content {
                background-color: #fff!important;
                border: 1px solid #eee;
                font-size: .555556rem;
                .van-cell {
                    padding: 1px 8px 1px 0;
                    height: .833333rem;
                    line-height: .833333rem;
                }
            }
            .van-cell__value {
            }
        }
        ::-webkit-input-placeholder {
            font-size: 12px;
        }
        ::placeholder {
            font-size: 12px;
        }
    }
    .scanBox {
        margin-right: 5px;
        height: 1.296296rem;
        line-height: 1.296296rem;
        text-align: center;
        img {
            width: .740741rem;
            height: .740741rem;
            vertical-align: middle;
        }
    }
}

</style>